<template>
	<view>
     <view class="data-top">
     	<u-steps :list="numList"  mode="number" :current="num"></u-steps>
     </view>
	<view class="data-tit">
		上传车辆行驶证正副页照片
	</view>
	<view class="box d-flex a-center a-center j-sb flex-wrap">
		<view style="width: 100%;" class="d-flex j-sb">
			<image class="img" src="../../../../static/home/013.png" mode=""></image>
			<view class="upImg">
				<text class="iconfont icon-weibiaoti1"></text>
				<text class="txt">行驶证页面</text>
			</view>
		</view>
		<view style="width: 100%;" class="d-flex j-sb mt-2">
			<image class="img" src="../../../../static/home/014.png" mode=""></image>
			<view class="upImg">
				<text class="iconfont icon-weibiaoti1"></text>
				<text class="txt">行驶证页面</text>
			</view>
		</view>
	</view>
	<view class="data-tit">
		较强险保单照片
	</view>
	<view class="boxt d-flex a-center a-center j-sb flex-wrap">
		<view style="width: 100%;" class="d-flex j-sb">
			<image class="imgt" src="../../../../static/home/013.png" mode=""></image>
			<view class="upImgt">
				<text class="iconfont icon-weibiaoti1"></text>
				<text class="txtt">行驶证页面</text>
			</view>
		</view>
	
	</view>
	
	<view style="background: #F0F5F8;" class="box_txt">
		<view class="txt">*照片注意事项:</view>
		<view class="txt">
			行驶证：正副页在同一张照片上且能清晰可见车牌号，车主姓名、车架号、编码、注册日期等信息
		</view>
		<view class="txt">
			较强险保单：保单格式最号是电子保单、如若只有纸质保单、保单需平铺拍照、且清晰可见车牌号、车架号、 保单起始日期等
		</view>
		
		<view @click="getStep" class="next-step">
			下一步
		</view>
		
	</view>
	
	
	</view>
</template>

<script>
	export default {
		data(){
			return{
				num:1,
				numList: [{
					id:1,
					name: '填写信息'
				}, {
					id:2,
					name: '上传图片'
				}, {
					id:3,
					name: '填写地址'
				}, {
					id:4,
					name: '提交'
				}, ],
			}
		},
		methods:{
			getStep(){
				uni.navigateTo({url:'./fillAdress'})
			}
		}
	}
</script>

<style lang="scss">
   .data-top{
   	  width: 100%;
   	  height: 175rpx;
   	  background: #F1F5F8;
   	  padding-top: 35rpx;
    }
	.data-tit{
		  width: 700rpx;
		  height: 40rpx;
		  font-size: 30rpx;
		  font-weight: bold;
		  line-height: 40rpx;
		  margin:  40rpx auto;
		  display: flex;
		 
		  justify-content: space-between;
		  align-items: center;
	}
	.box{
		width: 700rpx;
		height: 440rpx;
		margin:  0 auto;
		.img{
			width: 320rpx;
			height: 210rpx;
			border-radius: 10rpx;
		}
		.upImg{
			width: 320rpx;
			height: 210rpx;
			background:#DFEFFC;
			border-radius: 10rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.iconfont{
				font-size: 80rpx;
				color: #FFFFFF;
			}
			.txt{
				color: #62AFFE;
			}
		}
	}
	.boxt{
		width: 700rpx;
		height: 300rpx;
		margin:  0 auto;
		padding: 0 75rpx;
		.imgt{
			width: 208rpx;
			height: 272rpx;
			border-radius: 10rpx;
		}
		.upImgt{
			width: 208rpx;
			height: 272rpx;
			background:#DFEFFC;
			border-radius: 10rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.iconfont{
				font-size: 80rpx;
				color: #FFFFFF;
			}
			.txt{
				color: #62AFFE;
			}
		}
	}
	
	.box_txt{
		width: 100%;
		height: 400rpx;
		padding: 20rpx 10rpx;
      .txt{
		  font-size: 22rpx;
		  color: #9E9E9F;
	  }
	}
	.next-step{
		width: 680rpx;
		height: 90rpx;
		border-radius: 30rpx;
		background: #CDCDCD;
		color: #FFFFFF;
		font-size: 32rpx;
	    text-align: center;
		line-height: 90rpx;
		margin: 30rpx auto;
	}
</style>